<template>
    <div class="headerbox">
        <div class="header">
            <div class="headerL">
            <a onclick="javascript:history.back(-1)" class="goback"><img src="/assets/images/goback.png" /></a>
            </div>
            <div class="headerC0">
            <div class="ssdiv">
                <img src="/assets/images/ss.png" /><input name="" @change="getPro" v-model="search" type="text" placeholder="输入关键字..."/>
            </div>
            </div>
            <div class="headerR">
            <a @click="show = true"><img src="/assets/images/tr.png" /></a>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <div class="shopType">
        <van-dropdown-menu>
            <van-dropdown-item v-model="flag" :options="option1" @change="onFlag" />
            <van-dropdown-item v-model="OrderBy" :options="option2" @change="onOrderBy" />
        </van-dropdown-menu>
    </div>

    <div class="clear"></div>
    <div class="hbox"></div>
    <div class="mainWarp" style="background:#f3f3f3" v-if="ProductList.length > 0">
        <ul class="proul">
            <li v-for="item in ProductList" :key="item.id">
                <router-link :to="{path:'/product/product/info',query:{proid:item.id}}">
                <img :src="item.cover_cdn"/>
                <p class="tit">{{item.name}}</p>
                <div class="price">
                    <p>￥{{item.price}}</p>
                </div> 
                </router-link>    
            </li>
        </ul>
    </div>
    <van-empty description="暂无商品" v-else />

    <van-popup
        v-model:show="show"
        round
        position="bottom"
    >
    <van-picker
        :columns="TypeList"
        @cancel="show = false"
        @confirm="onConfirm"
    />
    </van-popup>
</template>
<script>
export default {
    created() {
        if(this.$route.query.typeid){
        let typeid = this.$route.query.typeid
        this.typeid = typeid
        // console.log(this.search)
        this.getProData()
        }
        this.getTypeData()
        if(this.search){
            this.getPro()
        }
        
    },
    updated(){
        this.$cookies.set('search','')
    },

    data() {
        return {
            search:this.$cookies.get('search')=={}?'':this.$cookies.get('search'),
            flag:0,
            OrderBy:'createtime',
            option1:[
                { text: '全部商品', value: 0 },
                { text: '新品商品', value: 1 },
                { text: '热销商品', value: 2 },
                { text: '推荐商品', value: 3 },
            ],
            option2:[
                { text: '默认排序', value: 'createtime' },
                { text: '价格排序', value: 'price' },
                { text: '库存排序', value: 'stock' },
            ],
            ProductList:[],
            typeid:0,
            show:false,
            TypeList:[]
        }
    },
    methods: {
        async getProData()
        {
            let data = {
                typeid:this.typeid,
                flag:this.flag,
                orderBy:this.OrderBy
            }

            let result = await this.$api.ProductData(data)

            if(result.code === 1)
            {
                this.ProductList = result.data
            }
        },
        async getTypeData()
        {
            let result = await this.$api.TypeData()

            if(result.code === 1)
            {
                let data = []

                for(let item of result.data)
                {
                    data.push({
                        text:item.name,
                        value:item.id
                    })
                }

                this.TypeList = data
            }
        },
         async getPro()
        {
            let data = {
                keyword:this.search,
                orderBy:this.OrderBy
            }

            let result = await this.$api.Product(data)
            console.log(result)
            if(result.code === 1)
            {
                
                this.ProductList=result.data
            }
            // console.log(this.ProductList)
        },
        onOrderBy()
        {
            this.getProData()
        },
        onFlag()
        {
            this.getProData()
        },
        onConfirm(value)
        {
            let typeid = value.selectedValues[0] ? value.selectedValues[0] : 0

            this.typeid = typeid

            this.getProData()
            this.show=false

        }
    },
}
</script>

<style>
ul.proul li img{
    margin: 0 auto;
    width: 90%;
    height: auto;
}
ul.proul li .tit{
    height: unset;
    line-height: unset;
    text-align: center;
}
ul.proul li .price{
    margin: 0 auto;
    height: unset;
}
ul.proul li .price p{
    margin-left: 50%;
    transform: translateX(-50%);
}
</style>